import React, { Component } from 'react';
import '../../scss/Classify.scss';
import { SearchOutlined } from '@ant-design/icons';
import { RightOutlined , LeftOutlined } from '@ant-design/icons';
import { Swiper } from 'antd-mobile'
import { category_list } from "../../tools/api";
import { category_subcate } from "../../tools/api";

class Classify extends Component {
    state = {
        currentIndex: 0,
        leftArr: [],
        rightArr: [],
        bannerArr:[]
    }
    render() {
        return (
            <div className='classify'>

                <div className="top">
                    <div className='jiantou'><LeftOutlined /></div>
                    <h3>分类</h3>
                    <div className='jiantou'><RightOutlined /></div>
                </div>

                <div className="search">
                    <i><SearchOutlined /></i>
                    <input type="text" placeholder='搜索店铺内商品' />
                </div>

                <div className="sho">
                    <div className="left">
                        {
                            this.state.leftArr.map((item, index) => {
                                return (
                                    <div className='left_list' key={ index }>
                                        <div onClick={() => { this.current(index, item) }} className={`border ${this.state.currentIndex == index ? 'activeserrt' : ''}`} >
                                            {item.name}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="right">
                        <div className="youce">
                            {/* banner 轮播图渲染 */}
                        <div className="bannermax">
                            <div className="ok">
                                <Swiper className='myswiper' autoplay loop autoplayInterval={ 2000 }>
                                    {
                                        this.state.bannerArr.map((item,index) => {
                                            return (
                                            <Swiper.Item key={ index }>
                                                    <img key={ index } src={ item.pic } alt="" /> 
                                            </Swiper.Item>
                                            )
                                        })
                                    }
                                </Swiper>
                            </div>
                        </div>
                        {
                            this.state.rightArr.map((item, index) => {
                        return (
                            <>
                                <div className="axbmm" key={index}>
                                    <div className="twoclass">
                                        <h4>{item.name}</h4>
                                    </div>
                                    <div className="shopping">
                                        {
                                            this.state.rightArr[index].subNavs.map((item,index) => {
                                                return (
                                                    <div className="ceate" key={ index } onClick={ () => { this.searchId(item) } }> 
                                                        <div className="top_carte">
                                                            <img src={item.pic} alt="" />
                                                        </div>
                                                        <div className="bottom_carte">
                                                            {item.name}
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                             </>
                                 )
                            })
                        }
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    // 点击更换下标的样式  并且拿到具体点击的 id 制作一个空数组存储值渲染
    current = (index, item) => {
        this.setState({ currentIndex: index, })
        category_subcate({ id: item.id }).then( response => { this.setState({ rightArr: response.data.subcate.subcategory,bannerArr:response.data.subcate.billboards })} ) 
    }

    searchId = (id) => {
        // console.log(id.id);
        this.props.history.push({ pathname:'/index/allshopping',state:{id:id.id} })
    }
    
    // 渲染左侧标题栏
    componentDidMount() { category_list().then(response => { this.setState( { leftArr: response.data.list } )})}
}

export default Classify;